<template>
  <button type="success" class="assign_button" @click="assignHome">布置作业</button>
  <div v-if="showAlert" class="assign_aler">
    <p class="aler1"><span class="Xcancle" @click="assignCancle">X</span></p>
    <h3 style="margin-left: 3%;">时间设置</h3>
    <div class="time-picker-container">
      截止提交时间:
      <el-date-picker
        v-model="deadlineDate"
        type="datetime"
        placeholder="选择日期和时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        locale="zh-CN"
        style="margin-bottom: 2%;"
        @change="updateDeadline"
      ></el-date-picker><br>
    </div>
    <button type="danger" class="assign_cancle" @click="assignCancle">取消</button>
    <button type="success" class="assign_issue" @click="submitHomework">发布</button>
  </div>
  <div class="assignment-header">
    <button class="back-button" @click="$router.go(-1)"><img src="@/assets/svgs/left.svg" alt="Back" /></button>
  </div>

  <div class="homework-assignment">
    <el-form>
      <el-form-item label="作业标题" required>
        <el-input v-model="homework.title" placeholder="请输入作业标题"></el-input>
      </el-form-item>
      <!-- 动态题目列表 -->
      <div v-for="(item, index) in homework.questions" style="margin-top: 1lvh;" :key="index">
        <el-form-item :label="'题目 ' + (index + 1) + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分值'">
          <el-input-number v-model="homework.scores[index]" :min="0" :max="100" label="得分"></el-input-number>
          <el-button type="danger" size="small" @click="removeQuestion(index)"  class="delete">删除题目</el-button>
          
        </el-form-item>
        <el-form-item label="本题问题">
          <el-input type="textarea" v-model="homework.questions[index]" placeholder="请输入题目内容"></el-input>
        </el-form-item>
        <el-form-item label="参考答案">
          <el-input type="textarea" v-model="homework.answers[index]" placeholder="请输入参考答案"></el-input>
        </el-form-item>
      </div>
      <el-button type="primary" @click="addQuestion" class="add">添加新题目</el-button>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import {useCounterStore} from "@/stores/counter"
import { addHomeworkService } from '@/api/homework';


const router = useRouter();
const showAlert = ref(false);
//从pinia获取课程ID
let store = useCounterStore();
const courseManageId=store.courseManageId;

// 定义作业表
const homework = reactive({
  title: '', // 作业标题
  deadline: '', // 截止时间
  questions: [], // 题目内容数组
  scores: [], // 分数数组
  answers: [] // 参考答案数组
});

const addQuestion = () => {
  homework.questions.push(''); // 添加新的题目内容
  homework.scores.push(10); // 默认分数为10
  homework.answers.push(''); // 添加新的参考答案
};
// 初始化第一个题目
addQuestion();

const deadlineDate = ref(null);

// 更新 deadline 为字符串格式
const updateDeadline = (value) => {
  homework.deadline = value; // 将选择的日期时间存储为字符串
};

const assignHome = () => {
  showAlert.value = true;
};

const assignCancle = () => {
  showAlert.value = false;
};



const removeQuestion = (index) => {
  homework.questions.splice(index, 1); // 删除题目内容
  homework.scores.splice(index, 1); // 删除分数
  homework.answers.splice(index, 1); // 删除参考答案
};

const submitHomework = async () => {
  if (!homework.deadline) {
    ElMessage.error('请选择截止提交时间');
    return;
  }
  const homeworkData = {
    homeworkName: homework.title, // 作业标题
    courseManageId: courseManageId, // 从Pinia获取课程ID
    question: homework.questions, // 题目内容数组
    scoreSet: homework.scores, // 分数数组
    answer: homework.answers, // 参考答案数组
    deadline: homework.deadline // 截止时间
  };
  console.log("homeworkData:", homeworkData);
  try {
    // 假设有一个API函数用于提交作业数据
    await addHomeworkService(homeworkData);
    ElMessage.success('布置成功');
    router.go(-1);
  } catch (error) {
    ElMessage.error('布置失败，请稍后再试');
  }
};

</script>

<style scoped>
.assignment-header {
  display: flex;
  justify-content: space-between;
  height: 7lvh;
  align-items: center;
  background-color: #13227A;
  color: white;
}

.back-button {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.assign_button {
  position: absolute;
  margin-top: 0.5%;
  margin-left: 88%;
  height: 5%;
  width: 10%;
  background-color: #1a3a8b;
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.assign_button:hover {
  background-color: #98a2bb;
}
.assign_aler {
  position: absolute;
  top: 25%;
  left: 35%;
  width: 30%;
  height: 30%;
  background-color: rgb(255, 255, 255);
  border: 1px solid #cccccc;
  z-index: 999;
  border-radius: 5px;
}

.aler1 {
  color: #000000;
  font-size: 20px;
  margin-left: 2%;
  font-weight: bold;
}

.Xcancle {
  float: right;
  margin-right: 5%;
}

.Xcancle:hover {
  color: #ff0202;
  cursor: pointer;
}

.time-picker-container {
  margin-left: 5%;
}

.assign_cancle {
  background-color: #ffffff;
  height: 20%;
  width: 15%;
  margin-left: 28%;
  margin-top: 2%;
  color: rgb(39, 38, 38);
  border: 1px solid #bcbcbc;
  cursor: pointer;
  border-radius: 5px;
}

.assign_cancle:hover {
  background-color: #868a95;
}

.assign_issue {
  background-color: #1a3a8b;
  height: 20%;
  width: 15%;
  margin-top: 2%;
  margin-left: 8%;
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.assign_issue:hover {
  background-color: #7a80af;
}

.delete {
  width: 60px;
  height: 30px;
  margin-left: 65%;
}

.homework-assignment {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.el-form-item {
  margin-bottom: 20px;
}

.add {
  width: 100%;
  background-color: #EFF6FF;
  color: #3B82F6;
}
</style>